<template>
<div>
    <div class="rightTop">
        <div class="rightTopOne">
            <div></div>
            <div>批次分解情况</div>
            <div></div>
            <div>...</div>
        </div>
        <div class="rightTopTwo">
                <div class="rightTopTwoDiv" v-for="(item,index) in overview[0]" :key="index">
                    <p><i :class="item.clas" :style="{'color':item.color}"></i></p>
                    
                    <dl style="margin-left: 10px;">
                        <dt>{{ item.classify }}</dt>
                        <b :style="{'color':item.color}" style="font-size:22px">{{ item.quantity }}</b>
                    </dl>
                    
                </div>    
        </div>
        <div class="rightTopthree">
            <div class="rightTopthreeList" v-for="(item,index) in overview[1]" :key="index">
                <div>{{item.title}}</div>
                <div class="rightTopthreeList_2">
                    <p><i :class="item.clas" :style="{'color':item.color}"></i></p>
                    <dl>
                        <dt style="font-size:12px">{{ item.classify }}</dt>
                        <b :style="{'color':item.color}" style="font-size:18px">{{ item.quantity }}</b>
                    </dl>
                </div>
                <div class="rightTopthreeList_2">
                    <p><i :class="item.clas1" :style="{'color':item.color}"></i></p>
                    <dl>
                        <dt style="font-size:12px">{{ item.classify1 }}</dt>
                        <b :style="{'color':item.color}" style="font-size:18px">{{ item.quantity1 }}</b>
                    </dl>
                </div>
                <div class="rightTopthreeList_progress">
                    <el-progress :percentage="((item.quantity1 /item.quantity*100).toFixed(1))/1"></el-progress>
                   
                </div>
               
            </div>
        
        </div>
    </div>
    <div class="rightBottom">
        <div class="rightTopOne">
            <div></div>
            <div>项目分解率</div>
            <div></div>
            <div>...</div>
        </div>
        <div class="rightBottomTwo">
            <div>电网数字化</div>
            <i></i>
            <div @click="this.caretChange" class="caretSort">{{caret}}<i :class="[caretA?'el-icon-caret-top':'el-icon-caret-bottom']" style="color: blue;"></i></div>
        </div>
        <div class="rightBottomThree">
            <div v-for="(item, index) in profit" :key="index" class="rightBottomThreeUl">
                <div class="ball">{{index+1}}</div>
                <div>
                    <span>{{ item.companyName}}
                    <el-progress :percentage="(item.asbe)"></el-progress>
                    </span> 
                </div>
                       
            </div>
        </div>
    </div>
</div>

</template>
<script >
import Vue from 'vue'

export default Vue.extend({
    components:{},
    data(){
        return{
            caret:'降序',
            caretA:false,
            //右下
            profit: [{id: 0,companyName: "国家电网公司",asbe: 27,amount: "32,543.0000"},
                    { id: 1, companyName: "国网北京市电力公司", asbe: 39, amount: "21,234.0000" },
                    { id: 2, companyName: "国网天津市电力公司", asbe: 37, amount: "21,003.0000" },
                    { id: 3, companyName: "国网河北省电力公司", asbe: 88, amount: "11,532.0000" },
                    { id: 4, companyName: "国网冀北电力有限公司", asbe: 99, amount: "10,231.0000" },
                    { id: 5, companyName: "国网上海市电力公司", asbe: 8, amount: "10,190.0000" },
                    { id: 6, companyName: "国网山西省电力公司", asbe: 66, amount: "10.084.0000" },
                    { id: 7, companyName: "国网山东电力集团公司", asbe: 14, amount: "10,001.000" },
                    { id: "8a", companyName: "国网安徽省电力公司", asbe: 69, amount: "10,001.000" },
                    { id: "9a", companyName: "国网江苏省电力公司", asbe: 59, amount: "10,001.000" },
                    { id: 2, companyName: "国网天津市电力公司", asbe: 37, amount: "21,003.0000" },
                    { id: 3, companyName: "国网河北省电力公司", asbe: 88, amount: "11,532.0000" },
                    { id: 4, companyName: "国网冀北电力有限公司", asbe: 99, amount: "10,231.0000" },
                    { id: 5, companyName: "国网上海市电力公司", asbe: 8, amount: "10,190.0000" },
                    { id: 6, companyName: "国网山西省电力公司", asbe: 66, amount: "10.084.0000" },
                    { id: 7, companyName: "国网山东电力集团公司", asbe: 14, amount: "10,001.000" },
                    { id: "8a", companyName: "国网安徽省电力公司", asbe: 69, amount: "10,001.000" },
                    { id: "9a", companyName: "国网江苏省电力公司", asbe: 59, amount: "10,001.000" },
                    { id: 5, companyName: "国网上海市电力公司", asbe: 8, amount: "10,190.0000" },
                    { id: 6, companyName: "国网山西省电力公司", asbe: 66, amount: "10.084.0000" },
                    { id: 7, companyName: "国网山东电力集团公司", asbe: 14, amount: "10,001.000" },
                    { id: "8a", companyName: "国网安徽省电力公司", asbe: 69, amount: "10,001.000" },
                    { id: "9a", companyName: "国网江苏省电力公司", asbe: 59, amount: "10,001.000" },
                    { id: 2, companyName: "国网天津市电力公司", asbe: 37, amount: "21,003.0000" },
                    { id: 3, companyName: "国网河北省电力公司", asbe: 88, amount: "11,532.0000" },
                    { id: 4, companyName: "国网冀北电力有限公司", asbe: 99, amount: "10,231.0000" },
                    { id: 5, companyName: "国网上海市电力公司", asbe: 8, amount: "10,190.0000" },
                    { id: 6, companyName: "国网山西省电力公司", asbe: 66, amount: "10.084.0000" },
                    { id: 7, companyName: "国网山东电力集团公司", asbe: 14, amount: "10,001.000" },
                    { id: "8a", companyName: "国网安徽省电力公司", asbe: 69, amount: "10,001.000" },
                    { id: "9a", companyName: "国网江苏省电力公司", asbe: 59, amount: "10,001.000" },
            ],
            //右上
            overview: [
                 //计划指标总览
                [
                    {
                        id: "0a",
                        classify: "总规模(亿元)",
                        clas: "el-icon-coin",
                        quantity: 1045,
                        color:'#1890FF'
                    },
                    {
                        id: "1a",
                        classify: "总规模(亿元)",
                        clas: "el-icon-success",
                        quantity: 4.50,
                        Percentages: -1.15,
                        color:'FFBC09'
                    },
                    {
                        id: "2a",
                        classify: "总规模(亿元)",
                        clas: "el-icon-time",
                        quantity: 6269154,
                        Percentages: 0,
                        color:'#8CC473'
                    },
                    
                ],
                [
                    {
                        id: "5a",
                        title:'第一批',
                        clas: "el-icon-s-order",
                        classify: "资产总额（亿元)",
                        quantity: 1000,
                        clas1: "el-icon-coin",
                        classify1:'资产总额（亿元)',
                        quantity1: 900,
                    },
                    {
                        id: "6a",
                        title:'第二批',
                        clas: "el-icon-s-order",
                        classify: "资产总额（亿元)",
                        quantity: 3000,
                        clas1: "el-icon-coin",
                        classify1:'资产总额（亿元)',
                        quantity1: 100,
                    },
                    {
                        id: "7a",
                        title:'第三批',
                        clas: "el-icon-s-order",
                        classify: "资产总额（亿元)",
                        quantity: 2000,
                        clas1: "el-icon-coin",
                        classify1:'资产总额（亿元)',
                        quantity1: 200,
                    },
               
                ],
            ],
        }
    },
     
     created() {
        this.sortList()
    },
     methods: {
         //排序
         caretChange(){
             if(this.caretA){
                 this.caretA = false;
                 this.caret = '降序';
                 this.sortList();
             }else{
                 this.caretA = true ;
                 this.caret = '升序';
                this.sortListB();
             }
         },
         //降序
         sortList(){
            function sortRule(a,b) {
                  return b.asbe- a.asbe;
            }
            this.profit.sort(sortRule);
         },
         //升序
        sortListB(){
            function sortRule(a,b) {
                  return a.asbe- b.asbe;
            }
            this.profit.sort(sortRule);
         }
    }
})
</script>
<style >
    .rightTop{
        width: 509px;
        margin: 10px;
        margin-left: 0;
        height: 286px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 1%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .rightTopOne{
        width: 510px;
        height: 36px;
        display: flex;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .rightTopOne > :nth-child(1) {
        width: 104px;
        height: 1px;
        margin-top: 15px;
        background: #d8d8d8;
    }
    .rightTopOne > :nth-child(3) {
        width: 104px;
        height: 1px;
        margin-top: 15px;
        background: #d8d8d8;
    }
    .rightTopOne > :nth-child(2) {
        line-height: 35px;
        margin: 0 40px;
        font-size: 16px;
        font-weight: bold;
        font-weight: 700;
    }
    .rightTopOne > :nth-child(4) {
        line-height: 7px;
        text-align: center;
        font-size: 15px;
        font-weight: bolder;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        border: solid 1px #ccc;
        position: absolute;
        right: 12px;
        top: 6px;
        color: #d3d3d3;
        cursor: pointer;
        z-index: 9;
    }
    .rightTopTwo{
        width: 94%;
        height: 70px;
        border: solid 1px #c3c3c3;
        display: flex;
        justify-content: space-around;
        flex-flow: wrap;
        /* margin-top: 10px; */
        align-items: center;
    }
    .rightTopTwoDiv{
        /* height: 40px; */
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .rightTopTwoDiv p{
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #ccc;
    }
    .rightTopthree{
        width: 94%;
        height: 143px;
        display: flex;
        justify-content: space-around;
        flex-flow: wrap;
        margin-top: 20px; 
    }
    .rightTopthree .rightTopthreeList{
        width: 150px;
        height: 142px;
        border: solid 1px #c3c3c3;
        text-align: center;
        position: relative;
    }
    .rightTopthreeList> :nth-child(1){
        background: #FFf;
        position: absolute;
        line-height: 30px;
        top: -15px;
        left: 38px;
        width: 70px;
        height: 30px;
        text-align: center;
    }
    .rightTopthreeList_2{
        height: 54px;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
    }
    .rightTopthreeList_2 p{
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #ccc;
    }
    .rightTopthreeList_progress{
        position: relative;
        height: 30px;
    }

    .rightTopthreeList_progress .el-progress-bar__outer{
        position: absolute;
        top: 16px;
        width: 130px;
    }
    .rightTopthreeList_progress .el-progress__text{
        color: #8CC473;
    }
    .rightBottom{
        width: 509px;
        margin: 10px;
        margin-left: 0;
        height: 679px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 1%;
        display: flex;
        flex-direction: column;
        align-items: center;       
    }
    .rightBottomTwo{
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        padding: 20px;
        justify-content: space-around;
        border-bottom: .2px solid #ccc;
    }
    .caretSort{
        cursor: pointer;
    }
    .rightBottomThree{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .rightBottomThree::-webkit-scrollbar {
        width: 8px;

    }
    .rightBottomThree::-webkit-scrollbar-track {
         background: #fff;
        border-radius: 2px;
    }
    .rightBottomThree::-webkit-scrollbar-thumb {
        background: #9999;
        border-radius: 4px;
    }



    .rightBottomThree .rightBottomThreeUl{
        width: 90%;
        height: 60px;
        display: flex;

    }
    .rightBottomThreeUl  > :nth-child(2){
      flex: 1;
      position: relative;
      margin-left: 30px;
      margin-top: 14px;

    }
    .ball{
        margin-top: 18px;
        width: 24px;
        height: 24px;
        background: #ccc;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
    }

    .rightBottomThree .el-progress__text{
        color: yellow;
        position: absolute;
        bottom: 10px;
        right: 18px;
    }
    .el-progress-bar__outer{
        width: 390px;
    }

</style>